<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="nav-title">会员实名认证</view>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">−</text>
				<text class="nav-icon">◎</text>
			</view>
		</view>

		<!-- 说明文字 -->
		<view class="intro-text">
			实名认证 (请上传真实的个人信息, 认证通过后将无法修改)
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 姓名 -->
			<view class="form-item">
				<view class="form-label">姓名</view>
				<view class="form-input-container">
					<input 
						class="form-input" 
						placeholder="请输入您的真实姓名" 
						v-model="formData.name"
						@blur="validateField('name')"
					/>
					<view v-if="errors.name" class="error-message">{{ errors.name }}</view>
				</view>
			</view>

			<!-- 身份证 -->
			<view class="form-item">
				<view class="form-label">身份证</view>
				<view class="form-input-container">
					<input 
						class="form-input" 
						placeholder="请输入身份证号码" 
						v-model="formData.idCard"
						@blur="validateField('idCard')"
					/>
					<view v-if="errors.idCard" class="error-message">{{ errors.idCard }}</view>
				</view>
			</view>

			<!-- 银行开户行 -->
			<view class="form-item">
				<view class="form-label">银行开户行</view>
				<view class="form-input-container">
					<input 
						class="form-input" 
						placeholder="请输入银行开户行" 
						v-model="formData.bankName"
						@blur="validateField('bankName')"
					/>
					<view v-if="errors.bankName" class="error-message">{{ errors.bankName }}</view>
				</view>
			</view>

			<!-- 银行开户名 -->
			<view class="form-item">
				<view class="form-label">银行开户名</view>
				<view class="form-input-container">
					<input 
						class="form-input" 
						placeholder="请输入银行开户名" 
						v-model="formData.accountName"
						@blur="validateField('accountName')"
					/>
					<view v-if="errors.accountName" class="error-message">{{ errors.accountName }}</view>
				</view>
			</view>

			<!-- 银行账号 -->
			<view class="form-item">
				<view class="form-label">银行账号</view>
				<view class="form-input-container">
					<input 
						class="form-input" 
						placeholder="请输入银行账号" 
						v-model="formData.accountNumber"
						@blur="validateField('accountNumber')"
					/>
					<view v-if="errors.accountNumber" class="error-message">{{ errors.accountNumber }}</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-container">
			<button class="submit-btn" @click="submitForm">提交</button>
		</view>

		<!-- 提交后状态信息 -->
		<view v-if="isSubmitted" class="status-info">
			<view class="status-text">您提交的信息正在审核</view>
			<view class="status-desc">提交认证申请后, 工作人员将在三个工作日进行核对完成审核</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					idCard: '',
					bankName: '',
					accountName: '',
					accountNumber: ''
				},
				errors: {
					name: '',
					idCard: '',
					bankName: '',
					accountName: '',
					accountNumber: ''
				},
				isSubmitted: false
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 验证单个字段
			validateField(fieldName) {
				const value = this.formData[fieldName];
				
				switch(fieldName) {
					case 'name':
						if (!value.trim()) {
							this.errors.name = '请输入姓名';
						} else {
							this.errors.name = '';
						}
						break;
					case 'idCard':
						if (!value.trim()) {
							this.errors.idCard = '请输入身份证';
						} else {
							this.errors.idCard = '';
						}
						break;
					case 'bankName':
						if (!value.trim()) {
							this.errors.bankName = '银行开户行';
						} else {
							this.errors.bankName = '';
						}
						break;
					case 'accountName':
						if (!value.trim()) {
							this.errors.accountName = '银行开户名';
						} else {
							this.errors.accountName = '';
						}
						break;
					case 'accountNumber':
						if (!value.trim()) {
							this.errors.accountNumber = '银行账号不正确';
						} else {
							this.errors.accountNumber = '';
						}
						break;
				}
			},

			// 验证所有字段
			validateAll() {
				this.validateField('name');
				this.validateField('idCard');
				this.validateField('bankName');
				this.validateField('accountName');
				this.validateField('accountNumber');
				
				return !Object.values(this.errors).some(error => error !== '');
			},

			// 提交表单
			async submitForm() {
				if (!this.validateAll()) {
					uni.showToast({
						title: '请完善表单信息',
						icon: 'none'
					});
					return;
				}

				try {
					// 显示加载提示
					uni.showLoading({
						title: '提交中...'
					});

					// 调用后端接口
					const result = await this.submitToBackend(this.formData);
					
					// 隐藏加载提示
					uni.hideLoading();
					
					if (result.success) {
						// 显示成功提示
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						
						// 设置提交状态
						this.isSubmitted = true;
					} else {
						uni.showToast({
							title: result.message || '提交失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},

			// 后端接口调用（预留接口）
			async submitToBackend(formData) {
				// 这里替换为实际的后端接口调用
				// 示例：
				// return await uni.request({
				//     url: 'your-api-url/real-name-auth',
				//     method: 'POST',
				//     data: formData
				// });
				
				// 模拟接口调用
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							success: true,
							message: '提交成功'
						});
					}, 1000);
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.nav-left {
		width: 60rpx;
	}

	.back-icon {
		font-size: 40rpx;
		color: #333333;
		font-weight: bold;
	}

	.nav-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.nav-icon {
		font-size: 24rpx;
		color: #666666;
	}

	/* 说明文字样式 */
	.intro-text {
		padding: 30rpx;
		font-size: 28rpx;
		color: #666666;
		line-height: 1.5;
		background-color: #ffffff;
	}

	/* 表单容器 */
	.form-container {
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	/* 表单项样式 */
	.form-item {
		display: flex;
		align-items: flex-start;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.form-label {
		width: 200rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: 500;
		line-height: 80rpx;
	}

	.form-input-container {
		flex: 1;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		font-size: 30rpx;
		color: #333333;
		background-color: transparent;
	}

	.form-input::placeholder {
		color: #999999;
	}

	.error-message {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #ff4444;
		line-height: 1.2;
	}

	/* 提交按钮样式 */
	.submit-container {
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #ff6b35;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 8rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn:active {
		background-color: #e55a2b;
	}

	/* 状态信息样式 */
	.status-info {
		padding: 30rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.status-text {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.status-desc {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.5;
	}

	/* 响应式适配 */
	@media screen and (max-width: 375px) {
		.nav-bar {
			height: 80rpx;
		}
		
		.form-label {
			width: 180rpx;
			font-size: 28rpx;
		}
		
		.form-input {
			font-size: 28rpx;
		}
	}

	@media screen and (min-width: 414px) {
		.nav-bar {
			height: 96rpx;
		}
		
		.form-label {
			width: 220rpx;
			font-size: 32rpx;
		}
		
		.form-input {
			font-size: 32rpx;
		}
	}

	/* 兼容性处理 */
	.form-input {
		box-sizing: border-box;
	}

	.submit-btn {
		box-sizing: border-box;
	}
</style>
